<template>
  <div class="jlszbox">
    <div class="jlszboxright">
      <!-- 背景 -->
      <img src="@/images/jlszbox1.png" alt="" class="jlszbjimg1" />
      <!-- 输入框 -->
      <el-input
        v-for="item in mkroidata"
        :key="item"
        v-model="mkroi[item]"
        :ref="'mkroi' + item"
        placeholder="输入"
        :class="[
          'mkroi1',
          'mkroi' + item,
          { 'roi-error': mkroiError[item - 1] }
        ]"
        @focus="focusfn(item)"
      ></el-input>

      <div class="tool dgjtoolqdsss" @click="mkcheckRoi" v-if="taskids">
        <img src="@/images/qds.png" alt="" class="normal" />
        <img src="@/images/qdsac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 播放视频按钮 -->

    <!-- 跳过 -->
    <!-- <div class="tool tigbox" @click="tgfn" v-show="tgshow">
      <img src="@/images/tg.png" alt="" class="normal" />
      <img src="@/images/tgac.png" alt="" class="active" />
    </div> -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    taskids: {
      type: Number,
      default: 0,
      required: true
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      mkroiError: [false, false, false, false, false, false],
      mkroiErrorCount: 0,
      mkroiAnswer: [157, -143, 0, -143, 157, 0],
      mkroidata: [1, 2, 3, 4, 5, 6],
      mkroi: {},
      mklbid: 1,
      tgshow: true,
      yzid: 0
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    mklbid: {
      handler(i, old) {
        if (old != 0 && this.taskids != 11) {
          this.$refs[`mkroi${old}`][0].$el.classList.remove('tymb')
        }
      },
      deep: true
      //   immediate: true
    },
    taskids: {
      handler(i) {
        // 先清空
        this.mkroiErrorCount = 0
        this.clearfn()
        // 重新赋值
        this.$nextTick(() => {
          console.log('当前id', i)

          if (i >= 2.3) {
            this.mkroi[1] = 157
          }
          if (i >= 2.4) {
            this.mkroi[2] = -143
          }
          if (i >= 3) {
            this.mkroi[3] = 0
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  //方法集合
  methods: {
    focusfn(i) {
      this.$refs[`mkroi${i}`][0].$el.classList.remove('tymb')
      this.$emit('tiptextfn', '')
    },

    mklbfn(id) {
      this.mklbid = id
      this.$refs[`mkroi${id}`][0].$el.classList.add('tymb')
    },
    mkcheckRoi() {
      let hasError = false
      const errorArr = []
      const { mkroidata, mkroiAnswer, mkroiError } = this
      this.yzid = 999

      // 任务ID对应的校验项控制（保持不变）
      if (this.taskids == 2.1) this.yzid = 0
      if (this.taskids == 2.3) this.yzid = 1
      if (this.taskids == 2.4) this.yzid = 2
      if (this.taskids == 3.1) this.yzid = 3
      if (this.taskids == 3.3) this.yzid = 4
      if (this.taskids == 3.4) this.yzid = 5
      console.log('正在校验', this.yzid)

      // 核心：修改校验逻辑，增加空值判断
      mkroidata.forEach((item, index) => {
        if (index > this.yzid) return

        const answer = mkroiAnswer[index]
        // 跳过无答案的项（保持不变）
        if (answer === null || answer === undefined) return

        // -------------------------- 关键修改开始 --------------------------
        const userInput = this.mkroi[item] // 先保存原始输入（未转数字）
        // 1. 先判断用户是否“未输入”（空字符串/纯空格）
        const isEmpty = userInput === '' || /^\s*$/.test(userInput)
        if (isEmpty) {
          // 未输入：直接判定为错误
          this.$set(mkroiError, index, true)
          hasError = true
          errorArr.push(index)
          console.log('在这返回', userInput, '（未输入）', true)
          return // 跳过后续数字转换逻辑
        }

        // 2. 输入非空：再转数字并对比（原有逻辑保留）
        const inputValue = Number(userInput)
        const isError = inputValue != answer
        console.log('在这返回', userInput, inputValue, isError)
        this.$set(mkroiError, index, isError)
        // -------------------------- 关键修改结束 --------------------------

        if (isError) {
          hasError = true
          errorArr.push(index)
        }
      })

      // 后续错误计数、自动填充、跳转逻辑（保持不变）
      if (hasError) {
        this.mkroiErrorCount++
        setTimeout(() => {
          errorArr.forEach((idx) => this.$set(mkroiError, idx, false))
        }, 400)

        if (this.mkroiErrorCount >= 3) {
          this.tgshow = false
          mkroidata.slice(0, mkroiAnswer.length).forEach((item, i) => {
            if (i > this.yzid) return
            if (mkroiAnswer[i] !== null && mkroiAnswer[i] !== undefined) {
              this.mkroi[item] = mkroiAnswer[i]
            }
          })

          setTimeout(() => {
            if (this.taskids == 2.1) this.$emit('gotask', 2.2)
            if (this.taskids == 2.3) this.$emit('gotask', 2.4)
            if (this.taskids == 2.4) this.$emit('gotask', 3.1)
            if (this.taskids == 3.1) this.$emit('gotask', 3.2)
            if (this.taskids == 3.3) this.$emit('gotask', 3.4)
            if (this.taskids == 3.4) this.$emit('gotask', 4.1)
          }, 100)
        }
      } else {
        this.mkroiErrorCount = 0
        if (this.taskids == 2.1) this.$emit('gotask', 2.2)
        if (this.taskids == 2.3) this.$emit('gotask', 2.4)
        if (this.taskids == 2.4) this.$emit('gotask', 3.1)
        if (this.taskids == 3.1) this.$emit('gotask', 3.2)
        if (this.taskids == 3.3) this.$emit('gotask', 3.4)
        if (this.taskids == 3.4) this.$emit('gotask', 4.1)
      }

      this.$emit('tiptextfn', '')
    },
    // 清空输入框的值
    clearfn() {
      this.mkroidata.slice(0, this.mkroiAnswer.length).forEach((item) => {
        // 无论是否有答案，都清空对应输入框（避免只清空有答案的项导致的残留）
        // 用 $set 确保清空操作是响应式的
        this.$set(this.mkroi, item, '')
      })
    }
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 关键代码：根据mkroidata动态初始化mkroi
    this.mkroidata.forEach((item) => {
      // 使用$set确保属性是响应式的（Vue 2必需，Vue 3可直接赋值）
      this.$set(this.mkroi, item, '')
    })
    // if (this.taskids == 2.1) {
    //   this.$refs.mkroi1[0].$el.classList.add('tymb')
    // }
  }
}
</script>
<style scoped>
.jlszbox {
  position: absolute;
  top: 50%;
  left: 300px;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.jlszboxleft {
  position: relative;
}
.jlszboxright {
  position: relative;
}
.jlszbjimg {
  width: 676px;
  height: 641px;
}
.jlszbjimg1 {
  width: 564px;
  height: 654px;
}

::v-deep .mkroi1 {
  position: absolute !important;
  left: 177px;
  top: 356px;
  width: 58px !important;
  background: #eeeeee;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(196, 195, 195, 0.795);
  font-size: 13px;

  /* transparent */
}
::v-deep .mkroi1 .el-input__inner {
  height: 36px !important;
  border: none !important;
  border-radius: 0px;
  background-color: transparent;
  color: #000000 !important;
  padding: 0px !important;
  padding-left: 2px !important;
}
::v-deep .roi-error .el-input__inner {
  color: red !important;
}
.mkroi2 {
  left: 248px !important;
}
.mkroi3 {
  left: 316px !important;
}
.mkroi4 {
  left: 384px !important;
}
.mkroi5 {
  left: 454px !important;
}
.mkroi6 {
  left: 177px;
  top: 410px;
}
.mkroi7 {
  left: 248px !important;
  top: 410px;
}
.mkroi8 {
  left: 316px !important;
  top: 410px;
}
.mkroi9 {
  left: 384px !important;
  top: 410px;
}
.mkroi10 {
  left: 454px !important;
  top: 410px;
}
.mkroi11 {
  width: 329px !important;
  left: 179px !important;
  top: 475px !important;
}

.tigbox {
  position: absolute;
  bottom: -40px;
}
.tigbox img {
  width: 140px;
  height: 53px;
}
.dgjtoolqdsss {
  cursor: pointer;
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translate(-50%, 0);
}
.dgjtoolqdsss img {
  width: 79px;
  height: 38px;
}
.bfdiv {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 115px;
  bottom: 135px;
  cursor: pointer;
}
</style>
<style>
/* ROI输入错误样式 */
.roi-error {
  animation: roi-flash 0.4s 2;
  border: 1px solid #ff0000 !important;
  color: red !important;
  background: #ffe2e2 !important;
}

@keyframes roi-flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
